<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
      <v-coord type="rect" />
      <v-tooltip />
      <v-legend
        :custom="true"
        :allow-all-canceled="true"
        :items="legendItems"
        :textStyle="textStyle"
        position="top-center"
        :offsetY="-5"
        :on-click="legendOnClick" />
      <v-axis
        dataKey="value"
        position="left"
        :grid="axisGrid"
        :label="axisLabel"
        :line="axisLine" />
      <v-axis
        dataKey="time"
        position="bottom"
        :grid="null"
        :label="axisLabel"
        :line="axisLine" />
      <v-bar position="time*value" color="type" :adjust="adjust" />
    </v-chart>
  </div>
</template>

<script>
import { WorkOrderProResult } from '@/api/modular/main/bigScreen/bigScreenManage'
  const DataSet = require('@antv/data-set')

  const sourceData = [
    {
      time: '6/15',
      workOrderFinishNum: 2800,
      workOrderProNum: 2060
    },
    {
      time: '6/16',
      workOrderFinishNum: 1800,
      workOrderProNum: 1300
    },
    {
      time: '6/17',
      workOrderFinishNum: 2150,
      workOrderProNum: 1600
    },
    {
      time: '6/18',
      workOrderFinishNum: 1900,
      workOrderProNum: 1290
    },
    {
      time: '6/19',
      workOrderFinishNum: 1370,
      workOrderProNum: 1000
    },
    {
      time: '6/20',
      workOrderFinishNum: 2400,
      workOrderProNum: 1560
    },
    {
      time: '6/21',
      workOrderFinishNum: 1800,
      workOrderProNum: 1300
    },
    {
      time: '6/22',
      workOrderFinishNum: 2150,
      workOrderProNum: 1600
    },
    {
      time: '6/23',
      workOrderFinishNum: 1900,
      workOrderProNum: 1290
    },
    {
      time: '6/24',
      workOrderFinishNum: 1370,
      workOrderProNum: 1000
    }
  ]

  const label = { offset: 12 }
  const adjust = [{ type: 'dodge', marginRatio: 1 / 32 }]
  const scale = [{
    dataKey: 'workOrderFinishNum',
    alias: '工单完成数量',
    min: 0
  }, {
    dataKey: 'workOrderProNum',
    alias: '工单产出数量',
    min: 0
  }]

  export default {
    data() {
      return {
        data: [],
        sourceData: sourceData,
        height: 400,
        scale: scale,
        label: label,
        adjust: adjust,
        padding: '66',
        axisGrid: {
          line: {
            stroke: '#d9d9d9',
            lineWidth: 1,
            lineDash: [4, 4]
          }
        },
        axisLabel: {
          textStyle: {
            fill: '#fff'
          }
        },
        axisLine: {
          stroke: '#fff',
          lineWidth: 1
        },
        legendItems: [{
            value: '工单完成数量',
            alias: 'workOrderFinishNum',
            marker: {
              symbol: 'square',
              fill: '#1370FB',
              radius: 5
            }
          },
          {
            value: '工单产出数量',
            alias: 'workOrderProNum',
            marker: {
              symbol: 'square',
              fill: 'rgba(90,174,98)',
              radius: 5
            }
          }
        ],
        textStyle: {
          fill: '#fff'
        },
        legendOnClick: (ev, chart) => {
          const item = ev.item
          const value = item.alias
          const checked = ev.checked
          const geoms = chart.getAllGeoms()
          for (let i = 0; i < geoms.length; i++) {
            const geom = geoms[i]
            if (geom.getYScale().field === value) {
              if (checked) {
                geom.show()
              } else {
                geom.hide()
              }
            }
          }
        }
      }
    },
    created() {
      WorkOrderProResult().then((res) => {
        this.sourceData = res.data
        for (const v of this.sourceData) {
          v.time = v.time.slice(5)
        }
        const dv = new DataSet.View().source(this.sourceData)
        dv.transform({
          type: 'fold',
          fields: ['workOrderFinishNum', 'workOrderProNum'],
          key: 'type',
          value: 'value'
        })
        this.data = dv.rows
      })
    }
  }
</script>
